<template>
  <v-card flat min-height="800" class="pa-6">
    <v-form ref="form">
      <v-row no-gutters class="mb-4">
        <v-col cols="5" class="d-flex">
          <v-row no-gutters>
            <v-col class="label">
              <p class="mb-0">Contact Info</p>
            </v-col>
            <v-col class="input text-left">
              <v-text-field
                v-model="formData.contactInfo"
                v-validate="'required'"
                name="Contact Info"
                class="white-input"
                placeholder="Enter Contact Info"
                dense
                solo
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Contact Info") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="6">
          <v-row no-gutters>
            <v-col class="label-date">
              <p class="mb-0">Start Date</p>
            </v-col>
            <v-col class="input-date text-left pl-2 pr-2">
              <PickerInput
                v-model="formData.startDate"
                v-validate="'required'"
                name="Start Date"
                placeholder="Select Start Date"
                :max="formData.endDate"
                hide-details
              ></PickerInput>
              <span class="vee-validate-error">
                {{ errors.first("Start Date") }}
              </span>
            </v-col>
            <v-col class="ml-8 label-date">
              <p class="mb-0">End Date</p>
            </v-col>
            <v-col class="input-date text-left pl-2 pr-2">
              <PickerInput
                v-model="formData.endDate"
                v-validate="'required'"
                name="End Date"
                placeholder="Select End Date"
                :min="formData.startDate"
                hide-details
              ></PickerInput>
              <span class="vee-validate-error">
                {{ errors.first("End Date") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <v-row no-gutters class="mb-4">
        <v-col cols="5" class="d-flex">
          <v-row no-gutters>
            <v-col class="label"> Location code </v-col>
            <v-col class="input text-left">
              <v-text-field
                v-model="formData.locationCode"
                v-validate="'required'"
                name="Location code"
                placeholder="Enter Location code"
                class="white-input"
                dense
                solo
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Location code") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="6">
          <v-row no-gutters>
            <v-row no-gutters>
              <v-col class="label"> Contract T&C </v-col>
              <v-col class="input-search text-left">
                <v-card class="d-flex align-center" flat>
                  <v-text-field
                    v-model="formData.contractTAndC"
                    v-validate="'required'"
                    name="Contract T&C"
                    placeholder="Select Contract T&C"
                    class="white-input"
                    disabled
                    dense
                    solo
                    hide-details
                  ></v-text-field>
                  <v-icon @click="openContractTAndC" class="ml-2">
                    mdi-magnify
                  </v-icon>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Contract T&C") }}
                </span>
              </v-col>
            </v-row>
          </v-row>
        </v-col>
      </v-row>
      <v-row no-gutters class="mb-4">
        <v-col cols="5" class="d-flex">
          <v-row no-gutters>
            <v-col class="label"> Cate Code </v-col>
            <v-col class="input text-left">
              <v-text-field
                v-model="formData.cateCode"
                v-validate="'required'"
                name="Cate Code"
                placeholder="Enter Cate Code"
                class="white-input"
                dense
                solo
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Cate Code") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="6">
          <v-row no-gutters>
            <v-row no-gutters>
              <v-col class="label"> Contract Sum </v-col>
              <v-col class="input text-left">
                <v-text-field
                  v-model="formData.contractSum"
                  v-validate="'required'"
                  name="Contract Sum"
                  placeholder="Enter Contract Sum"
                  class="white-input"
                  dense
                  solo
                  hide-details
                ></v-text-field>
                <span class="vee-validate-error">
                  {{ errors.first("Contract Sum") }}
                </span>
              </v-col>
            </v-row>
          </v-row>
        </v-col>
      </v-row>
      <v-row no-gutters class="mb-4">
        <v-col class="label">Contract Description</v-col>
        <v-col class="text-left">
          <v-textarea
            v-model="formData.contractDescription"
            v-validate="'required'"
            name="Contract Description"
            placeholder="Enter Contract Description"
            class="white-input"
            solo
            hide-details
            no-resize
            row="3"
          ></v-textarea>
          <span class="vee-validate-error">
            {{ errors.first("Contract Description") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters>
        <v-col cols="4" class="d-flex">
          <v-row no-gutters>
            <v-col class="label">Service Provider</v-col>
            <v-col class="input text-left">
              <v-select
                v-model="formData.serviceProvider"
                v-validate="'required'"
                :items="serviceProviderItems"
                name="Service Provider"
                placeholder="Enter Service Provider"
                class="white-input"
                dense
                hide-details
                solo
              ></v-select>
              <span class="vee-validate-error">
                {{ errors.first("Service Provider") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="4" class="d-flex">
          <v-row no-gutters>
            <v-col cols="4">Team</v-col>
            <v-col class="input text-left">
              <v-select
                v-model="formData.team"
                v-validate="'required'"
                :items="teamItems"
                name="Team"
                placeholder="Enter Team"
                class="white-input"
                dense
                hide-details
                solo
              ></v-select>
              <span class="vee-validate-error">
                {{ errors.first("Team") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="4" class="d-flex">
          <v-row no-gutters>
            <v-col cols="3">PIC</v-col>
            <v-col class="input-search text-left">
              <v-text-field
                v-model="formData.PIC"
                v-validate="'required'"
                :items="teamItems"
                name="PIC"
                placeholder="Enter PIC"
                class="white-input"
                dense
                solo
                hide-details
                append-outer-icon="mdi-magnify"
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("PIC") }}
              </span>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <v-data-table
        v-model="formData.items"
        :headers="contractHeader"
        :items="contractItems"
        show-select
        class="elevation-0 form-info mt-5"
        hide-default-footer
      >
      </v-data-table>
    </v-form>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :width="dialogWidth"
      @submit="save"
    >
      <template>
        <ContractTAndC
          v-if="step === 1"
          v-model="formData.contractTAndC"
          ref="contractTAndC"
        ></ContractTAndC>
      </template>
    </Dialog>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import VForm from "vuetify/src/components/VForm/index";
import PickerInput from "@/components/Maintenance/PickerInput/PickerInput.vue";
import ContractTAndC from "@/components/Customer/Dialog/ContractTAndC/ContractTAndC.vue";
import {
  IServiceContract,
  IAddress,
  IItemsItem,
} from "@/components/Customer/index";
@Component({
  components: {
    Dialog,
    PickerInput,
    ContractTAndC,
  },
})
export default class AddEditServiceContract extends Vue {
  get selectedAddress() {
    return this.$store.state.ContactInfoStore.selectedAddress;
  }
  // 1.Contract T&C 2.addItem
  step = -1;
  // Dialog
  dialogTitle = "";
  showDialog = false;
  get dialogWidth() {
    return this.step === 3 ? 480 : 1152;
  }
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // contract
  contractHeader = [
    {
      text: "Item#",
      value: "itemNumber",
    },
    {
      text: "Item Description",
      value: "itemDescription",
    },
    {
      text: "Serial Number",
      value: "serialNumber",
    },
    {
      text: "Alias",
      value: "alias",
    },
    {
      text: "Location Code",
      value: "locationCode",
    },
    {
      text: "QTY",
      value: "QTY",
    },
    {
      text: "Cost",
      value: "cost",
    },
    {
      text: "Date Expire",
      value: "dateExpire",
    },
  ];
  get contractItems() {
    if (this.selectedAddress) {
      return this.getAllItems([this.selectedAddress]);
    } else {
      return [];
    }
  }

  getAllItems(addressList: IAddress[]) {
    const items: IItemsItem[] = [];
    addressList.forEach((address) => {
      if (address.children) {
        items.push(...this.getAllItems(address.children));
      }
      items.push(...address.contactInfo.items.items);
    });
    return items;
  }
  formData = {
    id: "",
    contactInfo: "",
    startDate: "",
    endDate: "",
    locationCode: "",
    contractTAndC: "",
    cateCode: "",
    contractSum: "",
    contractDescription: "",
    serviceProvider: "",
    team: "",
    PIC: "",
    avatar: "",
    items: [],
  };
  serviceProviderItems = ["e-solutions"];
  teamItems = ["Team 1", "Team 2", "Team 3"];
  resetForm() {
    this.formData.id = "";
    this.formData.items = [];
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }
  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }
  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }
  getFormData(): IServiceContract {
    return JSON.parse(JSON.stringify(this.formData));
  }
  // table
  // action
  async save() {
    if (this.step === 1) {
      const contractTAndCValue = await (
        this.$refs.contractTAndC as ContractTAndC
      ).getValue();
      if (contractTAndCValue) {
        this.formData.contractTAndC = contractTAndCValue;
        this.closeDialog();
      }
    }
  }

  openContractTAndC() {
    this.step = 1;
    this.dialogTitle = "Contract T&C";
    this.$nextTick(() => {
      (this.$refs.contractTAndC as ContractTAndC).setSelectedValue(
        this.formData.contractTAndC
      );
    });
    this.openDialog();
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Customer/Dialog/ServiceContract/AddEditServiceContract.scss";
</style>
